<template>
  
     <div class="toast tanxin ">
        
        <i  :class="['iconfont', $store.state.toast.icon]"></i>
      <section>{{$store.state.toast.content}}</section>
    </div>
 
</template>

<script>
export default {
    data () {
        return {  };
    },
    
};
</script>
 
<style lang = "less" scoped>
    @import '../assets/base.less';
    .toast{
        position: absolute;
        background-color: #fff;
        padding: 10px  20px;
        align-items: center;
        left: 50%;
        transform: translateX(-50%);
        top: 20px;
        border-radius: 5px;
        box-shadow: 0 0 10px pink;
    }
    /* .fade-enter, .fade-leave{
       opacity: 0; 
    }
    .fade-enter-active, .fade-leave-active{
        transition:opacity is linear;
    }
    .fade-enter-to, .fade-leave{
        opacity: 1;
    } */
</style>